import React, { Component, Fragment } from 'react';
import { Card, Button, notification  } from 'antd';

import './ui.less';

class Notice extends Component {
	
	openNotice = (type, direction) => {
		if(direction){
			notification.config({
				placement: direction
			})
		}
		notification[type]({
			message: "发工资了",
			description: `26号发工资,方向${direction}`,
			direction,
			onClick: () => {
				console.log("点击了 ok");
			}
		})
	}
	render(){
		return(
			<Fragment>
				<Card title="通知提醒框" className="card-wrap">
					<Button type="primary" onClick={()=>this.openNotice("success")}>success</Button>
					<Button type="info" onClick={()=>this.openNotice("info")}>info</Button>
				</Card>
				<Card title="通知提醒框控制方向" className="card-wrap">
					<Button type="primary" onClick={()=>this.openNotice("success","topLeft")}>左上角</Button>
					<Button type="info" onClick={()=>this.openNotice("info","bottomLeft")}>左下角</Button>
				</Card>
			</Fragment>
		)
	}
}

export default Notice;